﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductPicturesPreview.aspx.cs" Inherits="ECommerce.ProductPicturesPreview" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
	<style type="text/css">
		.pptprod_picturethumb_container {
			margin-top: 5px;
			-webkit-box-shadow: #AAA 0px 0px 3px; /*border: 1px solid #AAA;*/
			overflow: hidden;
			width: 700px;
			padding: 0px 5px 0px 5px;
			text-align: center;
		}
		.pptproductpictures_nav {
			margin: 5px 0px 0px 0px;
		}
		.pptproductpictures_nav ul {
			margin: 0px;
			padding: 0px;
		}
		.pptproductpictures_nav ul li {
			display: inline-block;
			list-style: none;
			margin-left: 10px;
			float: left;
			overflow: hidden;
			border: #999999 1px solid;
		}
		.pptproductpictures_nav ul li a {
			cursor: pointer;
			display: block;
		}
		.pptproductpictures_nav ul a img {
			margin: 0px;
			border: none;
		}
		.pptproductpictures_nav ul li.inact {
			border: #999999 1px solid;
		}
		.pptproductpictures_nav ul li.act, .pptproductpictures_nav ul li:hover {
			/* The active state of the thumb */
			border: #990000 1px solid;
		}
	</style>

	<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>

	<script type="text/javascript">

		$(document).ready(function() {
			var imgsrc = $("#pptproductpicturesnav ul li img").first().attr("src");
			if (imgsrc != undefined && imgsrc != '') {
				imgsrc = imgsrc.split("?")[0] + "?" + imgsrc.split("&")[1] + "&picturesize=700";

				$("#pptprodpicture_prev").attr("src", imgsrc);

				$("#pptproductpicturesnav ul li").first().addClass("act");

				$("#pptproductpicturesnav ul li img").mouseover(function() {
					if ($("#pptproductpicturesnav ul li img").length > 1) {
						//var theClickedimg = this;

						$("#pptproductpicturesnav ul li img").each(function(index) {
							$(this).parent().parent().css("border-color", "#999999");
						});

						$(this).parent().parent().css("border-color", "#990000");

						var imgsrc = $(this).attr("src");
						imgsrc = imgsrc.split("?")[0] + "?" + imgsrc.split("&")[1] + "&picturesize=700";

						$("#pptprodpicture_prev").attr("src", imgsrc);
					}
				});
			}
		});
	</script>

</head>
<body>
	<form id="form1" runat="server">
	<center>
		<div id="pptpicturethumbscontainer" class="pptprod_picturethumb_container">
			<div id="pptprodpicturepreview">
				<img id="pptprodpicture_prev" />
			</div>
			<div id="pptproductpicturesnav" class="pptproductpictures_nav">
				<asp:Repeater ID="RepeaterPicturesNav" runat="server">
					<HeaderTemplate>
						<ul>
					</HeaderTemplate>
					<ItemTemplate>
						<li><a>
							<img src='PictureHandler.ashx?picturesize=50&pictureid=<%# DataBinder.Eval(Container.DataItem, "PictureID") %>' />
						</a></li>
					</ItemTemplate>
					<FooterTemplate>
						</ul>
					</FooterTemplate>
				</asp:Repeater>
			</div>
		</div>
	</center>
	</form>
</body>
</html>
